<template>
    <div class="content">
        <!-- head -->
        <Head></Head>
        <!-- maincontent -->
        <div class="mainbox">
            <el-row>
                <el-col :span=6>
                    <div class="leftside">
                        <!-- 设备统计 -->
                        <div class="part1">
                            <div style="width:22.4vw; border-bottom: 0.01rem rgb(27,179,217,.38) solid;height: 0.265rem;">
                            <div class="alltitle">设备统计</div>
                            </div>
                            <div style="width: 22.4vw; height: 25vh">
                            <el-row>
                                <el-col :span="8">
                                <div>
                                    <div class="eqptype1">{{monitor}}</div>
                                    <img src="../../assets/images/monitor.png" style="width:1.4rem;height:1.1rem;margin: -0.45rem 0 0 -0.03rem;">
                                    <div style="color:#fff;margin-left:0.42rem">监控类</div>
                                </div>
                                </el-col>
                                <el-col :span="8">
                                <div>
                                    <div class="eqptype2">{{fireControl}}</div>
                                    <img src="../../assets/images/fireControl.png" style="width:1.4rem;height:1.1rem;margin: -0.45rem 0 0 0.1rem;">
                                    <div style="color:#fff;margin-left:0.54rem">消防类</div>
                                </div>
                                </el-col>
                                <el-col :span="8">
                                <div>
                                    <div class="eqptype3">{{other}}</div>
                                    <img src="../../assets/images/other.png" style="width:1.4rem;height:1.1rem;margin: -0.45rem 0 0 0.2rem;">
                                    <div style="color:#fff;margin-left:0.66rem">其他类</div>
                                </div>
                                </el-col>
                            </el-row>
                            </div>
                        </div>
                        <!-- 设备监测 -->
                        <div class="part2">
                            <div style="width:22.4vw; border-bottom: 0.01rem rgb(27,179,217,.38) solid;height: 0.265rem;margin-top: -0.5rem;">
                                <div class="alltitle">设备监测</div>
                            </div>
                            <div>
                                <el-row>
                                    <el-col :span="10">
                                        <img src="../../assets/images/equipmentTesting.png" style="width:1.6rem;height:1.4rem;margin:0.2rem 0">
                                    </el-col>
                                    <el-col :span="14">
                                        <div style="margin-top:0.2rem">
                                            <div style="width:2.2rem;color:#fff;font-size: 0.17rem;">正常设备
                                                <div style="float: right;color: #fff;text-shadow: 0 0 0.05rem #2BF376;">{{goodEqp}}</div>
                                            </div>
                                            <div v-for="item in goodEqpList" :key="item.index" :data="goodEqpList" class="eqpitem1" ></div>
                                        </div>
                                        <div style="margin-top:0.4rem">
                                            <div style="width:2.2rem;color:#fff;font-size: 0.17rem;">异常设备
                                                <span style="float: right;color:#fff;text-shadow: 0 0 0.05rem #FE9460;">{{badEqp}}</span>
                                            </div>
                                            <div v-for="item in badEqpList" :key="item.index" :data="goodEqpList" class="eqpitem2"></div>
                                        </div>
                                    </el-col>
                                </el-row>
                            </div>
                            <!-- 动态表格 -->
                            <div>
                                <ul class="tabletitle2" style="margin-top:-0.2rem;width: 22.4vw;">
                                    <li style="width: 19%;">序号</li>
                                    <li style="width: 25%;">设备名称</li>
                                    <li style="width: 30%;">设备类型</li>
                                    <li style="width: 26%;">设备状态</li>
                                </ul>
                                <div class="InfiniteScroll">
                                    <div class="scroll_parent_box" @mouseenter="mEnter" @mouseleave="mLeave">
                                        <div class="scroll_list" :style="{ transform: `translate(0px,-${scrollTop}px)` }">
                                            <div ref="scrollItemBox">
                                                <div class="scroll_item" v-for="(item, index) in listData" :key="index" >
                                                    <el-row>
                                                        <el-col :span="5">
                                                            <div style="color: #fff;text-align:center;">&nbsp;&nbsp;{{item.id}}</div>
                                                        </el-col>
                                                        <el-col :span="5">
                                                            <div style="color: #fff;text-align:center;">&nbsp;&nbsp;&nbsp;{{item.title}} </div>
                                                        </el-col>
                                                        <el-col :span="7">
                                                            <div style="color: #fff;text-align:center;">&emsp;&emsp;{{item.type}} </div>
                                                        </el-col>
                                                        <el-col :span="7">
                                                            <div v-if="item.state == '异常'" style="color: #FA5965;text-align:center;">&emsp; {{item.state}} </div>
                                                            <div v-else style="color: #fff;text-align:center;">&emsp; {{item.state}} </div>

                                                        </el-col>
                                                    </el-row>
                                                </div>
                                            </div>
                                            <div v-html="copyHtml"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </el-col>
                <el-col :span=12>
                    <div style="height:8.15rem;">&emsp;</div>
                    <div style="width: 100%;text-align: center; ">
                    <Navbar></Navbar>
                    </div>
                </el-col>
                <el-col :span=6>
                    <div class="rightside">
                    <!-- 设备运行率 -->
                        <div class="part4">
                            <div style="width:22.4vw; border-bottom: 0.01rem rgb(27,179,217,.38) solid;height: 0.265rem;">
                                <div class="alltitle">设备运行率</div>
                            </div>
                            <el-row>
                                <el-col :span="8">
                                    <div style="width:22.4vw;height:1.6rem;">
                                        <div style="color: #2DEDEA;font-weight: bold;font-size: 0.25rem;margin: 0.6rem 0 0 0.32rem;position: absolute;">
                                        {{rote1}}</div>
                                        <div class="quan11"></div>
                                        <div class="quan1"></div>
                                        <div class="donut1"></div>
                                        <div style="color:#fff;font-weight: bold;font-size: 0.16rem;position: absolute;
                                        margin: 1.5rem 0 0 0.3rem;">运 行 率</div>
                                    </div>
                                </el-col>
                                <el-col :span="8">
                                    <div style="width:22.4vw;height:1.6rem;margin-left: 0.06rem;">
                                        <div style="color: #FABE47;font-weight: bold;font-size: 0.25rem;margin: 0.6rem 0 0 0.32rem;position: absolute;">
                                        {{rote2}}</div>
                                        <div class="quan22"></div>
                                        <div class="quan2"></div>
                                        <div class="donut2"></div>
                                        <div style="color:#fff;font-weight: bold;font-size: 0.16rem;position: absolute;
                                        margin: 1.5rem 0 0 0.3rem;">维 修 率</div>
                                    </div>
                                </el-col>
                                <el-col :span="8">
                                    <div style="width:22.4vw;height:1.6rem;margin-left: 0.1rem;">
                                        <div style="color: #F54B4B;font-weight: bold;font-size: 0.25rem;margin: 0.6rem 0 0 0.42rem;position: absolute;">
                                        {{rote3}}</div>
                                        <div class="quan33"></div>
                                        <div class="quan3"></div>
                                        <div class="donut3"></div>
                                        <div style="color:#fff;font-weight: bold;font-size: 0.16rem;position: absolute;
                                        margin: 1.5rem 0 0 0.3rem;">损 坏 率</div>
                                    </div>
                                </el-col>
                            </el-row>
                        </div>
                    <!-- 设备分析 -->
                        <div class="part5">
                            <div style="width:22.4vw; border-bottom: 0.01rem rgb(27,179,217,.38) solid;height: 0.265rem;margin-top: 0.35rem;">
                                <div class="alltitle">设备分析</div>
                            </div>
                            <div id="category2" style="width: 22.4vw; height: 25vh ;"></div>
                        </div>
                    <!-- 设备报警 -->
                        <div class="part6">
                            <div style="width:22.4vw; border-bottom: 0.01rem rgb(27,179,217,.38) solid;height: 0.265rem;margin-top: -0.1rem;">
                                <div class="alltitle">设备报警</div>
                            </div>
                            <div style="margin-top:0.3rem;">
                                <ul class="tabletitle2" style="margin-top:-0.2rem;width: 22.4vw;">
                                    <li style="width: 19%;">序号</li>
                                    <li style="width: 25%;">设备号</li>
                                    <li style="width: 30%;">设备地址</li>
                                    <li style="width: 26%;">警报</li>
                                </ul>
                                 <div class="InfiniteScroll">
                                    <div class="scroll_parent_box1" @mouseenter="mEnter" @mouseleave="mLeave">
                                        <div class="scroll_list" :style="{ transform: `translate(0px,-${scrollTop}px)` }">
                                            <div ref="scrollItemBox">
                                                <div class="scroll_item" v-for="(item, index) in eqplist" :key="index" >
                                                    <el-row>
                                                        <el-col :span="5">
                                                            <div style="color: #fff;text-align:center;">&nbsp;&nbsp;{{item.id}}</div>
                                                        </el-col>
                                                        <el-col :span="5">
                                                            <div style="color: #fff;text-align:center;">&nbsp;&nbsp;&nbsp;{{item.title}} </div>
                                                        </el-col>
                                                        <el-col :span="7">
                                                            <div style="color: #fff;text-align:center;">&emsp;&emsp;{{item.place}} </div>
                                                        </el-col>
                                                        <el-col :span="7">
                                                            <div style="color: #fff;text-align:center;">&emsp; {{item.info}} </div>
                                                        </el-col>
                                                    </el-row>
                                                </div>
                                            </div>
                                            <div v-html="copyHtml"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>
<script>
import Navbar from "../components/Navbar";
import Head from '../components/head';
import $ from "jquery";

let timer = null;
export default{
    // components: { Navbar , Head , ScollTable},
    components: { Navbar , Head },

    data(){
        return{
            monitor:32,
            fireControl:64,
            other:12,
            goodEqp:567,   //正常设备
            badEqp:234,    //异常设备
            goodEqpList:[
                {id:0},{id:1},{id:2},{id:3},{id:4},{id:5},{id:6},{id:7},
                {id:8},{id:9},{id:10},{id:11},{id:12},{id:13},
            ],
            badEqpList:[
                {id:0},{id:1},{id:2},{id:3},{id:4},{id:5},{id:6},
            ],
            scrollTop: 0, //列表滚动高度
            speed: 50, //滚动的速度
            listData: [
                { 'title': '监控','type': '消防类','state': '异常','id':'0'}, 
                { 'title': '监控','type': '监控类','state': '开启','id':'1'}, 
                { 'title': '监控','type': '监控类','state': '开启','id':'2'}, 
                { 'title': '监控','type': '监控类','state': '开启','id':'3'}, 
                { 'title': '监控','type': '消防类','state': '开启','id':'4'}, 
                { 'title': '监控','type': '消防类','state': '关闭','id':'5'}, 
                { 'title': '监控','type': '监控类','state': '开启','id':'6'}, 
                { 'title': '监控','type': '监控类','state': '开启','id':'7'}, 
                { 'title': '监控','type': '监控类','state': '开启','id':'8'}, 
                { 'title': '监控','type': '其他类','state': '异常','id':'9'}, 
                { 'title': '监控','type': '监控类','state': '开启','id':'10'}, 
                { 'title': '监控','type': '其他类','state': '关闭','id':'11'}, 
                { 'title': '监控','type': '其他类','state': '关闭','id':'12'}, 
            ], //表示有多少个列表项
            copyHtml: '', //复制多一份防止滚动到后面出现空白
            rote1:'87%',
            rote2:'12%',
            rote3:'1%',
            rote1List:[400,450,550,600,580,560,620],
            rote2List:[10,30,100,150,180,210,240],
            rote3List:[5,15,50,75,90,105,120],
            // rote3List:[0,20,12,32,10,12,17],
            eqplist: [
                { 'title': '123','info': '灭火警报','place': 'XXXXXX','id':'0'}, 
                { 'title': '007','info': '灭火警报','place': 'XXXXXX','id':'1'}, 
                { 'title': '021','info': '灭火警报','place': 'XXXXXX','id':'2'}, 
                { 'title': '012','info': '灭火警报','place': 'XXXXXX','id':'3'}, 
                { 'title': '003','info': '灭火警报','place': 'XXXXXX','id':'4'}, 
                { 'title': '021','info': '灭火警报','place': 'XXXXXX','id':'5'}, 
                { 'title': '123','info': '灭火警报','place': 'XXXXXX','id':'6'}, 
                { 'title': '212','info': '灭火警报','place': 'XXXXXX','id':'7'}, 
                { 'title': '211','info': '灭火警报','place': 'XXXXXX','id':'8'}, 
                { 'title': '231','info': '灭火警报','place': 'XXXXXX','id':'9'}, 
                { 'title': '232','info': '灭火警报','place': 'XXXXXX','id':'10'}, 
                { 'title': '312','info': '灭火警报','place': 'XXXXXX','id':'11'}, 
                { 'title': '321','info': '灭火警报','place': 'XXXXXX','id':'12'}, 
            ],
        }
    },
    mounted() {
        // 如果列表数据是异步获取的，记得初始化在获取数据后再调用
        this.initScroll()

        $(document).ready(function () {
        var whei = $(window).width();
        $("html").css({ fontSize: whei / 20 });
        $(window).resize(function () {
            var whei = $(window).width();
            $("html").css({ fontSize: whei / 20 });
        });
        });

        this.getCategory2();
    },
    methods:{
        initScroll() {
            this.$nextTick(() => {
                this.copyHtml = this.$refs.scrollItemBox.innerHTML
                this.startScroll()
            })
        },
        // 鼠标移入停止滚动
        mEnter() {
            clearInterval(timer);
        },
        // 鼠标移出继续滚动
        mLeave() {
            this.startScroll()
        },
        // 开始滚动
        startScroll() {
            timer = setInterval(this.scroll, this.speed);
        },
        // 滚动处理方法
        scroll() {
            this.scrollTop++
            // 获取需要滚动的盒子的高度
            let scrollItemBox = this.$refs.scrollItemBox.offsetHeight
            // 当判断滚动的高度大于等于盒子高度时，从头开始滚动
            if (this.scrollTop >= scrollItemBox) {
                this.scrollTop = 0
            }
        },
        
        getCategory2(){
            let myChart7 = this.$echarts.init(document.getElementById("category2"));
            var option;
            option = {
                dataZoom: [
                    {
                        // 第一个 dataZoom 组件
                        type: "inside",
                        xAxisIndex: 0, // 表示这个 dataZoom 组件控制 第一个 xAxis
                        startValue: 0, // 数据窗口范围的起始数值index
                        endValue: 4, // 数据窗口范围的结束数值index，即一次性展示多少个
                    },
                ],
                color:['#28F5F3','#FED15D','#FF4449'],
                legend: {
                    left: 100,
                    top: 5,
                    itemWidth: 12,
                    itemHeight:8,
                    icon: "rect",  
                    textStyle: {
                        color: "rgba(255,255,255,1)",
                        fontSize: 12,
                    },
                    data: ['运行率', '维修率', '损坏率']
                },
                grid: {
                    left: '1%',
                    right: '0.1%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['2016', '2017', '2018', '2019', '2020', '2021', '2022'],
                    axisTick: {
                        show: false, 
                    },
                    axisLine:{
                        lineStyle: {color: 'rgba(27, 179, 217, .38)'}
                    },
                    axisLabel: {
                        rotate: 40,
                        fontSize: 10
                    }
                },
                yAxis: {
                    type: 'value',
                    name: "数量（件）",
                    // nameGap: '25',
                    nameTextStyle: {
                        padding: [0, 0, 12, 0] // 上右下左与原位置距离
                    },
                    max: 700, //最大刻度值
                    interval: 100, //刻度值间隔值
                    splitLine: {
                        lineStyle: {
                            type: "dashed", //设置网格线类型 dotted：虚线   solid:实线
                            color: "rgb(255,255,255,0.1)", //网格线颜色
                        },
                    },
                    axisTick: {
                        show: false, 
                    },
                    axisLine: {
                        show: false, 
                    },
                },
                series: [
                    {
                    name: '运行率',
                    type: 'line',
                    stack: 'Total',
                    smooth: true,
                    lineStyle: {
                        width: 2,
                        color:'rgb(40, 245, 243)'
                    },
                    showSymbol: false,
                    areaStyle: {
                        opacity: 0.8,
                        color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: 'rgb(40, 245, 243,.73)'
                        },
                        {
                            offset: 1,
                            color: 'rgb(40, 245, 243,.0)'
                        }
                        ])
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: this.rote1List
                    },
                    {
                    name: '维修率',
                    type: 'line',
                    // stack: 'Total',
                    smooth: true,
                    lineStyle: {
                        width: 2,
                        color: 'rgb(254, 209, 93)'
                    },
                    showSymbol: false,
                    areaStyle: {
                        opacity: 0.8,
                        color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: 'rgb(254, 209, 93,.83)'
                        },
                        {
                            offset: 1,
                            color: 'rgb(254, 209, 93,.0)'
                        }
                        ])
                    },
                    emphasis: {
                        focus: 'series'
                    },
                     data: this.rote2List
                    },
                    {
                    name: '损坏率',
                    type: 'line',
                    // stack: 'Total',
                    smooth: true,
                    lineStyle: {
                        width: 2,
                        color: 'rgb(255, 68, 73)'
                    },
                    showSymbol: false,
                    areaStyle: {
                        opacity: 0.8,
                        color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: 'rgb(255, 68, 73,.73)'
                        },
                        {
                            offset: 1,
                            color: 'rgb(255, 68, 73,.0)'
                        }
                        ])
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: this.rote3List
                    },
                ],
                textStyle: {
                    color: "#fff", // 标题颜色
                },
            };
            option && myChart7.setOption(option);
            window.addEventListener(
                "resize",
                () => {
                myChart7.resize();
                },
                false
            );
            setInterval(() => {
                if (option.dataZoom[0].endValue == option.series[0].data.length - 1) {
                option.dataZoom[0].endValue = 4;
                option.dataZoom[0].startValue = 0;
                } else {
                option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1;
                option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1;
                }
                myChart7.setOption(option);
            }, 3000);
        }
    }
}
</script>
<style>
body {
  padding: 0px;
  margin: 0px;
  color: #222;
  font-family: "微软雅黑";
}
body {
  background: #010827 url(../../assets/images/bg1.jpg) center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: #666;
  font-size: 0.1rem;
  overflow: hidden;
}
.alltitle {
  width: 1rem;
  background-color: #055A8B;
  margin: 0.15rem 0 0.05rem 0;
  border-left: rgb(27,233,231) 0.03rem solid;
  font-size: 0.17rem;
  color: rgb(255, 255, 255, 1);
  text-align: center;
}
.part1{
  margin: 0.4rem 0 0 0.2rem;
  float: left;
  position: relative;
  animation: showLeft 1.4s;
}
.part2{
  margin: -0.27rem 0 0 0.2rem;
  float: left;
  position: relative;
  animation: showLeft 1.2s;
}
.leftside{
  height: 8.7rem;
  background: url(../../assets/images/left.png) no-repeat center center ;
  background-size: 100% 100%;
  margin-left: 0.1rem;
  margin-top: -0.15rem;
}
.rightside{
  height: 8.7rem;
  background: url(../../assets/images/right.png) no-repeat center center ;
  background-size: 100% 100%;
  margin-right: 0.1rem;
  margin-top: -0.15rem;
}
.eqptype1{
  font-weight: bold;
  background-image: linear-gradient(
    #fff,
    #fff,
    rgb(167, 222, 245),
    #44B2F5 
  );
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent; /*需要文字透明*/
  font-size: 0.3rem;
  margin: 0.15rem 0 0.1rem 0.47rem;
  float: left;
}
.eqptype2{
  font-weight: bold;
  background-image: linear-gradient(
    #fff,
    #fff,
    rgb(245, 215, 167),
    #FF9763
  );
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent; /*需要文字透明*/
  font-size: 0.3rem;
  margin: 0.15rem 0 0.1rem 0.6rem;
  float: left;
}
.eqptype3{
  font-weight: bold;
  background-image: linear-gradient(
    #fff,
    #fff,
    rgb(167, 245, 185),
    #30BC37
  );
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent; /*需要文字透明*/
  font-size: 0.3rem;
  margin: 0.15rem 0 0.1rem 0.7rem;
  float: left;
}
.eqpitem1{
    width: 0.1rem;
    height: 0.2rem;
    background-color:#2BF376;
    border-radius: 0.04rem;
    float: left;
    margin: 0.03rem;
}
.eqpitem2{
    width: 0.1rem;
    height: 0.2rem;
    background-color:#FE9460;
    border-radius: 0.04rem;
    float: left;
    margin: 0.03rem;
}
.InfiniteScroll {
    box-sizing: border-box;
    padding: 0rem;
}

.scroll_parent_box {
    width: 22.4vw;
    height: 35vh;
    overflow: hidden;
    box-sizing: border-box;
    padding: 0 0.1rem;
}
.scroll_parent_box1 {
    width: 22.4vw;
    height: 22vh;
    overflow: hidden;
    box-sizing: border-box;
    padding: 0 0.1rem;
}
.scroll_list {
    transition: all 0ms ease-in 0s
}

.scroll_item {
    height: 0.4rem;
    width: 22.9vw;
    line-height: 0.3rem;
    font-size: 0.1rem;
    /* background-color: #44B2F5; */
    margin-left: -0.2rem;
    margin-bottom: 0.1rem;
    border-bottom:rgb(255,255,255,.2) 0.02rem solid;

}
.tabletitle2{
  background:rgb(29,140,230,.2);
  font-weight:bold;
  list-style:none;
  padding:0;
  margin:0.2rem 0 0 0;
  width:96%;
  height:0.4rem;
  line-height:0.4rem;
  font-size: 0.1rem;
  text-align: center;
  float: left;
}
.tabletitle2 li{
  white-space:nowrap;
  display:block;
  width:21%;
  float:left;
  text-indent:0.2em;
  color:#fff;
} 
.donut1 {
   display: inline-block;
   border: 0.07rem solid rgba(25, 80, 93, .6);
   border-left-color:  #2EE9E7;
   border-radius: 50%;
   width: 0.8rem;
   height: 0.8rem;
   animation: donut-spin 5.2s linear infinite;
   position: absolute;
   margin: 0.4rem 0 0 0.2rem;
}
@Keyframes donut-spin {
   0% {
     transform: rotate(0deg);
   }
 
   100% {
     transform: rotate(360deg);
   }
}
@Keyframes donut-spin-ni {
   0% {
     transform: rotate(0deg);
   }
 
   100% {
     transform: rotate(-360deg);
   }
}
.quan1{
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    border: 0.06rem #1FAFAE dashed;
    animation: donut-spin-ni 20s linear infinite;
    position: absolute;
    margin: 0.28rem 0 0 0.1rem;
}
.quan11{
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 50%;
    border: 0.04rem #1FAFAE solid;
    position: absolute;
    margin: 0.2rem 0 0 0;
}
.donut2 {
   display: inline-block;
   border: 0.07rem solid rgba(75, 75, 59, .6);
   border-left-color:  #FED16A;
   border-radius: 50%;
   width: 0.8rem;
   height: 0.8rem;
   animation: donut-spin 5.2s linear infinite;
   animation-delay: 0.5s;
   position: absolute;
   margin: 0.4rem 0 0 0.2rem;
}
.quan2{
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    border: 0.06rem #AE8429 dashed;
    animation: donut-spin-ni 20s linear infinite;
    position: absolute;
    margin: 0.28rem 0 0 0.1rem;
}
.quan22{
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 50%;
    border: 0.04rem rgb(175, 132, 37, .9) solid;
    position: absolute;
    margin: 0.2rem 0 0 0;
}
.donut3{
   display: inline-block;
   border: 0.07rem solid rgba(67, 44, 58, .6);
   border-left-color:  #FF3D38;
   border-radius: 50%;
   width: 0.8rem;
   height: 0.8rem;
   animation: donut-spin 5.2s linear infinite;
   animation-delay: 1s;
   position: absolute;
   margin: 0.4rem 0 0 0.2rem;
}
.quan3{
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    border: 0.06rem rgba(255, 59, 53, .8)  dashed;
    animation: donut-spin-ni 20s linear infinite;
    position: absolute;
    margin: 0.28rem 0 0 0.1rem;
}
.quan33{
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 50%;
    border: 0.04rem rgba(255, 59, 53, .6) solid;
    position: absolute;
    margin: 0.2rem 0 0 0;
}
</style>